"use client";

import React, { useState, useEffect, useRef } from 'react';
import { Send, ChevronDown, ChevronUp } from 'lucide-react';

interface Message {
  text: string;
  sender: 'user' | 'bot';
  timestamp: string;
  images?: string[];
}

interface Category {
  category: string;
  questions: string[];
}
interface Answer {
  text: string;
  images?: string[];
}


const CustomerServiceChat: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputText, setInputText] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [loadingText, setLoadingText] = useState('正在回答中，请稍候'); // 动态等待文字
  const [suggestions, setSuggestions] = useState<string[]>([]); // 用于存储匹配的问题
  const chatAreaRef = useRef<HTMLDivElement>(null); // 定义 chatAreaRef
  const [mounted, setMounted] = useState(false); // 用于确保只在客户端渲染
  const [showCommonQuestions, setShowCommonQuestions] = useState(false);
  let loadingInterval: NodeJS.Timeout | null = null;
  useEffect(() => {
    setMounted(true);
  }, []);

  const commonQuestions: Category[] = [
    {
      category: "团购相关",
      questions: [
        "怎么核销",
        "团购如何使用",
        "核销后怎么门没开",
        "是先核销再进去吗",
        "是核销后就开始计费吗"
      ]
    },
    {
      category: "使用相关",
      questions: [
        "怎么使用（怎么进场）",
        "没有牌照、摩托车、电动车怎么使用",
        "是自动洗车的吗",
        "洗车步骤（第一次用怎么洗）",
        "这个充值后是所有门店都能用的吗",
        "充值后是所有门店通用吗",
        "收费标准是怎么样的",
        "出不去了怎么办",
        "电话没人接怎么办",
        "充值了点击结束订单但是还是显示余额不足"
      ]
    },
    {
      category: "加盟相关",
      questions: [
        "我想开一家洗车店，怎么加盟"
      ]
    }
  ];

  const knowledgeBase: Record<string, Answer> = {
    '怎么核销': {
      text: '第一步：扫门口门店码。<br />第二步：点击进入自己所在的门店（注意不要选错）并且点击该门店（如果已经在门店页面则直接看第三步）<br />第三步：点击团购核销将自己购买的团购券券码复制进去并点击立即核销。<br />第四步：返回刚才页面，点击绑定车牌，绑定完成后车子往后倒并缓慢前进并可自动开门（无牌车或摩托车等点击“开始洗车”按钮即可，注意不可选错工位）。<br /><br />注：如果实在不会操作可以打门上电话，如果是30分钟套餐超时需要另外在小程序上充值50起充，如果不想充值请留意小程序上的时间。',
      images: ['https://s21.ax1x.com/2025/04/17/pEhWGsx.png','https://s21.ax1x.com/2025/04/17/pEhWNdO.png','https://s21.ax1x.com/2025/04/17/pEhWUoD.png','https://s21.ax1x.com/2025/04/17/pEhWoyq.png']
    },
    '团购如何使用': {
      text: '第一步：扫门口门店码。<br />第二步：点击进入自己所在的门店（注意不要选错）并且点击该门店（如果已经在门店页面则直接看第三步）<br />第三步：点击团购核销将自己购买的团购券券码复制进去并点击立即核销。<br />第四步：返回刚才页面，点击绑定车牌，绑定完成后车子往后倒并缓慢前进并可自动开门（无牌车或摩托车等点击“开始洗车”按钮即可，注意不可选错工位）。<br /><br />注：如果实在不会操作可以打门上电话，如果是30分钟套餐超时需要另外在小程序上充值50起充，如果不想充值请留意小程序上的时间。',
      images: ['https://s21.ax1x.com/2025/04/17/pEhWGsx.png','https://s21.ax1x.com/2025/04/17/pEhWNdO.png','https://s21.ax1x.com/2025/04/17/pEhWUoD.png','https://s21.ax1x.com/2025/04/17/pEhWoyq.png']
    },
    '核销后怎么门没开': {
      text: '核销成功后不会直接开门，点击进入自己所在的门店（不要选择错），进行车牌绑定，绑定成功后车辆后退在缓慢前进，识别器识别到车牌便会自动开门。（无牌车或摩托车则点击对应的工位的“开始洗车”按钮）',
      images: ['https://s21.ax1x.com/2025/04/17/pEhWGsx.png','https://s21.ax1x.com/2025/04/17/pEhWoyq.png']
    },
    '是先核销再进去吗': {
      text: '是的，需要先核销再进去，核销及使用流程可以提问：团购如何使用'
    },
    '是核销后就开始计费吗': {
      text: '并非如此，我们这个是在门打开的时候才开始计时'
    },
    '怎么使用（怎么进场）': {
      text: '第一步：扫描门上二维码。<br/> 第二步：点击所在门店，点击“套餐充值”，并完成充值。<br/>第三步：返回并进行车牌绑定，绑定成功后车辆后退在缓慢前进，识别器识别到车牌便会自动开门。（无牌车或摩托车则点击对应的工位的“开始洗车”按钮）',
      images: ['https://s21.ax1x.com/2025/04/17/pEhWGsx.png',"https://s21.ax1x.com/2025/04/17/pEhfP0K.png",'https://s21.ax1x.com/2025/04/17/pEhfEfH.png','https://s21.ax1x.com/2025/04/17/pEhWoyq.png']
    },
    '是自动洗车的吗': {
      text: '我们这个是手动洗车的，是需要自己动手洗车的。'
    },
    '洗车步骤（第一次用怎么洗）': {
      text: '第一步：喷洒预洗液，分解污渍<br/> 第二步：高压水枪冲洗车身<br/> 第三步：喷洒泡沫（水蜡洗车液），覆盖全车身<br/> 第四步：使用洗车拖把或是工具栏上的羊毛手套进行全车擦拭<br/> 第五步：再次使用高压水枪进行全车冲洗冲干净<br/> 第六步：使用毛巾将车身擦拭干净'
    },
    '充值后是所有门店通用吗': {
      text: '是的，我们的余额是通用的，所有门店都可以使用'
    },
    '收费标准是怎么样的': {
      text: '1.次卡套餐或团购30分钟套餐是只能洗30分钟的，超出时长后按照0.5/分钟计费。</br> 2.如果是非次卡和团购的话，前10分钟基础时长每个门店不同（门上有收费标准），超出10分钟后按照0.5元/分钟计费 <br/><br/> 注：如果是团购或次卡套餐超时需要另外在小程序上充值50起充，如果不想充值请留意小程序上的时间。'
    },
    '出不去了怎么办': {
      text: '首先确定自己有没有订单（小程序内->左上角返回首页->右下角我的->洗车订单），里面可以看到订单，如果有订单就确保自己余额充足，如果余额不足需要充值（注意不要购买次卡套餐，否则无法离场），实在无法离场请拨打工位上的店主电话。'
    },
    '电话没人接怎么办': {
      text: '如果是半夜或者是没人接电话，可能是店主在忙或是手机静音，麻烦加微信：sp6794，到时候会有客服处理的'
    },
    '充值了点击结束订单但是还是显示余额不足': {
      text: '查看自己到底是不是充错套餐了，如果余额不足必须要是非次卡套餐（储值卡套餐），你可以通过充值储蓄卡套餐进行离场，实在有问题请拨打工位上的店主电话。'
    },
    '套餐类型有什么区别': {
      text: '我们分为次卡和储值卡套餐：</br> 1.进入小程序点击右下角我的最上方能看到自己对应的余额和次卡套餐 </br>2.次卡套餐和团购30分钟是只能洗30分钟的，超出时长后按照0.5/分钟计费（超出部分扣费扣的是余额也就是储值卡套餐内的金额）。</br> 3.储值卡套餐是前10分钟基础时长每个门店不同（门上有收费标准），超出10分钟后按照0.5元/分钟计费',
      images: ['https://s21.ax1x.com/2025/04/17/pEhfrh4.png']
    },
    '如果我账户同时有次卡又有余额是怎么扣费的呢': {
      text: '前30分钟扣次卡，超出部分按照0.5/每分钟扣余额，比如洗了40分钟，则消耗1张次卡及10元余额'
    },
  
    '我想开一家洗车店，怎么加盟': {
      text: '如果您也对自助洗车店感兴趣的话，可以添加微信：sp6794，会有专业人员与您对接。'
    }
  };


  const findAnswer = (question: string): Answer => {
    return knowledgeBase[question] || { text: '抱歉，我暂时无法回答这个问题，请联系人工客服。' };
  };
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputText(value);

    // 根据输入过滤问题
    if (value.trim()) {
      const filteredQuestions = Object.keys(knowledgeBase).filter(question =>
        question.toLowerCase().includes(value.toLowerCase())
      );
      setSuggestions(filteredQuestions);
    } else {
      setSuggestions([]);
    }
  };
  const handleSuggestionClick = (suggestion: string) => {
    setInputText(''); // 将选中的问题填充到输入框
    setSuggestions([]); // 清空建议列表
    addMessage(suggestion); // 直接发送选中的问题
  };
  const addMessage = async (text: string) => {
    setIsLoading(true); // 设置为等待中状态
    startLoadingAnimation(); // 开始动态文字动画
    // 添加用户消息
    const userMessage: Message = {
      text,
      sender: 'user',
      timestamp: new Date().toLocaleTimeString()
    };
    setMessages(prev => [...prev, userMessage]);// 将用户消息添加到消息列表
    // 检查是否在 knowledgeBase 中
    const answer = findAnswer(text);
    if (answer.text !== '抱歉，我暂时无法回答这个问题，请联系人工客服。') {
      const botMessage: Message = {
        text: answer.text,
        sender: 'bot',
        timestamp: new Date().toLocaleTimeString(),
        images: answer.images
      };
      setMessages(prev => [...prev, botMessage]);
      setIsLoading(false); // 回复完成后取消等待状态
      stopLoadingAnimation(); // 停止动态文字动画
      return;
    }

    // 调用 AI 接口
    setIsLoading(true);
    console.log(isLoading);
    try {
      const response = await fetch('http://47.103.92.174:8080/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text })
      });

      const data = await response.json();

      // 添加 AI 回复
      const botMessage: Message = {
        text: data.answer.replace(/\\n/g, '<br />'), // 将 \n 转换为 <br />
        sender: 'bot',
        timestamp: new Date().toLocaleTimeString(),
        images: data.images // 设置图片 URL
      };
      console.log(botMessage);
      setMessages(prev => [...prev, botMessage]);
    } catch (error) {
      console.error('Error:', error);
      const errorMessage: Message = {
        text: '抱歉，服务出现了一点问题，请拨打门上或工位上电话联系店主。',
        sender: 'bot',
        timestamp: new Date().toLocaleTimeString()
      };
      setMessages(prev => [...prev, errorMessage]);
    } finally {
      setIsLoading(false); // 回复完成后取消等待状态
      stopLoadingAnimation(); // 停止动态文字动画
    }
  };
  const startLoadingAnimation = () => {
    let dots = 0;
    setLoadingText('正在回答中，请稍候');
    loadingInterval = setInterval(() => {
      dots = (dots + 1) % 4; // 循环显示 0 到 3 个点
      setLoadingText(`正在回答中，请稍候${'.'.repeat(dots)}`);
    }, 500); // 每 500 毫秒更新一次
  };

  const stopLoadingAnimation = () => {
    if (loadingInterval) {
      clearInterval(loadingInterval);
      loadingInterval = null;
    }
    setLoadingText('正在回答中，请稍候'); // 恢复初始文字
  };
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputText.trim()) return;
    addMessage(inputText);
    setInputText('');
    setSuggestions([]); // 清空建议列表
  };

  useEffect(() => {
    if (chatAreaRef.current) {
      chatAreaRef.current.scrollTop = chatAreaRef.current.scrollHeight;
    }
  }, [messages]);

  if (!mounted) {
    return null; // 在客户端挂载之前不渲染任何内容
  }

  return (
    <div className="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow md:p-6">
      <h1 className="text-2xl font-bold text-center mb-6">车溢达智能客服助手</h1>

      {/* 移动端常见问题切换按钮 */}
      <div className="md:hidden mb-4">
        <button
          onClick={() => setShowCommonQuestions(!showCommonQuestions)}
          className="w-full flex justify-between items-center p-3 bg-blue-100 rounded"
        >
          <span>{showCommonQuestions ? '点击关闭' : '点击查看常见问题'}</span>
          {showCommonQuestions ? <ChevronUp /> : <ChevronDown />}
        </button>
      </div>

      {/* 移动端可折叠常见问题列表 */}
      {showCommonQuestions && (
        <div className="md:hidden mb-4 p-4 bg-gray-50 rounded">
          {commonQuestions.map((category, idx) => (
            <div key={idx} className="space-y-2 mb-4">
              <h4 className="font-medium text-gray-700">{category.category}</h4>
              <ul className="space-y-1">
                {category.questions.map((question, qIdx) => (
                  <li key={qIdx}>
                    <button
                      onClick={() => {
                        handleSuggestionClick(question);
                        setShowCommonQuestions(false);
                      }}
                      className="text-blue-500 hover:text-blue-700 text-left text-sm w-full"
                    >
                      {question}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}

      <div className="flex flex-col md:flex-row gap-4">
        {/* PC端常见问题 */}
        <div className="hidden md:block md:w-1/3 border-r pr-4">
          <h3 className="text-lg font-semibold mb-4">常见问题</h3>
          <div className="space-y-4">
            {commonQuestions.map((category, idx) => (
              <div key={idx} className="space-y-2">
                <h4 className="font-medium text-gray-700">{category.category}</h4>
                <ul className="space-y-1">
                  {category.questions.map((question, qIdx) => (
                    <li key={qIdx}>
                      <button
                        onClick={() => handleSuggestionClick(question)}
                        className="text-blue-500 hover:text-blue-700 text-left text-sm w-full"
                      >
                        {question}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* 聊天区域 */}
        <div className="w-full md:w-2/3">
          <div
            className="h-[500px] md:h-96 overflow-y-auto mb-4 p-4 bg-gray-50 rounded"
            id="chat-area"
            ref={chatAreaRef}
          >
            {messages.map((message, index) => (
              <div
                key={index}
                className={`mb-4 ${message.sender === 'user' ? 'text-right' : 'text-left'
                  }`}
              >
                <div
                  className={`inline-block p-3 rounded-lg max-w-[80%] ${message.sender === 'user'
                      ? 'bg-blue-500 text-white'
                      : 'bg-white border'
                    }`}
                  style={{ whiteSpace: 'pre-wrap' }}
                >
                  <p dangerouslySetInnerHTML={{ __html: message.text }}></p>
                  {message.images && message.images.map((image, imgIdx) => (
                    <img
                      key={imgIdx}
                      src={image}
                      alt={`response-${imgIdx}`}
                      className="mt-2 max-w-full h-auto"
                    />
                  ))}
                  <small className="text-xs opacity-75">
                    {message.timestamp}
                  </small>
                </div>
              </div>
            ))}
            {/* 显示动态等待中的提示 */}
            {isLoading && (
              <div className="text-center text-gray-500 mt-4">{loadingText}</div>
            )}
          </div>
          <form onSubmit={handleSubmit} className="flex gap-2">
            <input
              type="text"
              value={inputText}
              onChange={handleInputChange}
              placeholder="请输入您的问题..."
              className="flex-1 p-2 border rounded text-sm"
            />
             {/* 显示建议列表 */}
             {suggestions.length > 0 && (
              <ul className="absolute z-10 bg-white border rounded shadow w-full mt-1">
                {suggestions.map((suggestion, index) => (
                  <li
                    key={index}
                    onClick={() => handleSuggestionClick(suggestion)}
                    className="p-2 hover:bg-gray-100 cursor-pointer"
                  >
                    {suggestion}
                  </li>
                ))}
              </ul>
            )}
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            >
              <Send className="w-5 h-5" />
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default CustomerServiceChat;